{% extends "base.html" %}

{% block content %}

<div id="menu-toolbar" class="ui-state-active">
    <ul class ="right">
        <li><a href="#" id="id_create_story_link" >Add Story</a></li>
    </ul>
    <ul class ="left">
        <li><a href="/?id_it={{ iteration.key.id }}">{{ iteration.name }}</a></li>
    </ul>
</div>

<div id ="title-container">
    <h2>Story Form</h2>
</div>

<div class="form_container">
    <form action="/story_form?id={{ story_id }}&iteration_id={{ iteration.key.id }}" method="post" id="story_form">
        <input type="hidden" name="iteration_id" value="{{ iteration.key.id }}">
        <input type="hidden" name="id" value="{{ story_id }}">
        <fieldset>
            <legend>Story Details</legend>
            <ol>
                {{ form.as_ul }}
                <li>
                    <label for="id_assigned_to">Assigned to:</label>
                    <select name="assigned_to" id="id_assigned_to" class="select ui-widget-content ui-corner-all">
                        {% for member in iteration.get_project.get_members %}
                        <option value="{{ member.key.id }}">{{ member.user.nickname }}</option>
                        {% endfor%}
                    </select>
                </li>
                <li class="center">
                    <input type="submit" name="submit" value="Save">
                    <input type="submit" name="submit" value="Cancel">
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(function() {
            $( "input:submit").button();
        });
        $("form input[type=submit]").click(function() {
            $( 'input[type=submit][clicked=true]' ).removeAttr("clicked");
            $(this).attr("clicked", "true");
            $(this).parent().parent().parent().submit();
        });
        $("#story_form").submit(function(event) {
            var $form = $( this ),
            source = $form.find( 'input[type=submit][clicked=true]' ).val();
            if (source.toLowerCase() == 'cancel') {
                event.preventDefault();
                if ('{{ story_id }}' != '') {
                    window.location = "/story?id=" + '{{ story_id }}';
                } else {
                    window.location = "/?id_it=" + '{{ iteration.key.id }}';
                }
            }
        });
    });
</script>
{% endblock %}